<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        main {
            margin: 100px auto 0;
            width: 1000px;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: space-around;
            text-align: center;
            border: 2px solid rgb(79, 227, 197);
            border-radius: 15px;
        }

        .pic {
            display: flex;
            margin: 0 auto;
            width: 400px;
            height: 50px;
        }

        button {
            font-size: 25px;
            width: 200px;
            height: 50px;
        }
        button:active{
            border: 2px solid red;
        }
        p{
            font-size: 25px;
            width: 100px;
            height: 50px ;
            text-align: center;
            line-height: 50px;
        }
    </style>
</head>

<body>
    <main class="miss"></main>
    <div class="pic">
        <button class="shang">上一页</button>
        <button class="xia">下一页</button>
        <p><span class="num"></span>/4</p>
    </div>
</body>

</html>
<script>
    let page = 1
    // 转化对象格式
    function objSting(obj) {
        var str = ``
        for (var key in obj) {
            str += `${key}=${obj[key]}&`
        }
        return str.slice(0, str.length - 1)
    }

    function ajax(method, url, mains, Cat) {
        // 1.创建请求对象
        var xhr = new XMLHttpRequest()
        // 2.配置请求对象
        xhr.open(method, url + "?" + objSting(mains))
        // 3.设置回调函数
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                Cat(JSON.parse(xhr.responseText))
            }
        }
        // 4.发送请求
        xhr.send()
    }
    // =============================点击事件=================================
    document.querySelector('.shang').onclick =(()=>{
        if(page >1){
            rendergo(page ,--page)
        }
    })
    document.querySelector('.xia').onclick =(()=>{
        if(page <4){
            rendergo(page ,++page)
        }
    })


    // =============================渲染事件=================================
    function rendergo(page, num) {
        ajax('get', `https://yantianfeng.com/api/emotion`, { page: num, count: 10 }, function (data) {
            var str = data.emotions.map((item, index) => {
                return `<div><img src ="${item.url}"/><div>${item.title}</div></div>`
            }).join('')
            document.querySelector('.miss').innerHTML = str
            document.querySelector('.num').innerHTML = num
        })

        // 判断事件的结果，是否禁用
        if (num <= 1) {
            document.querySelector('.shang').disabled = 'true'
        } else {
            document.querySelector('.shang').disabled = ''
        }
        if (num >= 4) {
            document.querySelector('.xia').disabled = 'true'
        } else {
            document.querySelector('.xia').disabled = ''
        }
    }
    rendergo(page,1)















    // if (e.target.tagName == 'xia') {
    //     if (page < 4) {
    //         ajax('get', `https://yantianfeng.com/api/emotion`, { page: ++page, count: 10 }, function (data) {
    //             var str = data.emotions.map((item, index) => {
    //                 return `<div><img src ="${item.url}"/><div>${item.title}</div></div>`
    //             }).join('')
    //             document.querySelector('.miss').innerHTML = str
    //         })
    //     }
    //     if (page == 4) {
    //         document.querySelector('.xia').disabled = 'true';
    //     }
    // }

    // =============================点击下一页=================================
    // document.querySelector('.xia').onclick = function () {
    //     if (page < 4) {
    //         ajax('get', `https://yantianfeng.com/api/emotion`, { page: ++page, count: 10 }, function (data) {
    //             var str = data.emotions.map((item, index) => {
    //                 return `<div><img src ="${item.url}"/><div>${item.title}</div></div>`
    //             }).join('')
    //             document.querySelector('.miss').innerHTML = str
    //         })
    //     } else if (page == 4) {
    //         document.querySelector('.xia').disabled = 'true';
    //     }
    // }
</script>